<template>
  <div class="needs">
    <back />
    <searchCondition
      is-industry-sector-show
      :is-location-show="!isSearchLoginedUser"
      @do-search="doSearch"
    >
      <template #operation>
        <el-button @click="toPublish" :icon="Edit" type="primary" size="large">我要发布</el-button>
      </template>
    </searchCondition>
    <div v-if="!isEmpty" class="need-list">
      <div
        @click="toDetail(item.id)"
        v-for="item in needInfo.list"
        :key="item.id"
        class="card-box c-p"
      >
        <el-card style="position: relative">
          <div class="card-inner">
            <div class="card-inner-head">
              <h3 class="ellipsis" style="max-width: 70%">
                {{ item.title }}
              </h3>
              <div class="budget">
                <span class="color-gray">投入预算：</span>
                <span class="price">{{ item.budget }}{{ item.budget === '面议' ? '' : '万' }}</span>
              </div>
            </div>
            <div class="flex m-t-10 m-b-10">
              <div class="m-r-20 f-s-0">
                <span class="color-gray">所在地：</span>
                <span>{{ item.location?.join('/') }}</span>
              </div>
              <div class="ellipsis">
                <span class="color-gray">截止时间：</span>
                <span>{{ item.deadline?.split(' ')[0] }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="m-r-20 f-s-0">
                <span class="color-gray">需求类型：</span>
                <span>{{ item.requirementType }}</span>
              </div>
              <div class="ellipsis">
                <span class="color-gray">行业领域：</span>
                <el-tag
                  class="m-b-10 m-r-10 ellipsis"
                  v-for="(name, index) in item.industrySector"
                  :key="index"
                >
                  {{ name }}
                </el-tag>
              </div>
            </div>
          </div>
          <div v-if="isSearchLoginedUser" class="operation-btns">
            <el-button @click.stop="toEdit(item.id)" type="primary" size="small">编辑</el-button>
            <el-button @click.stop="doDelete(item.id)" type="danger" size="small">删除</el-button>
          </div>
          <el-tag v-if="isSearchLoginedUser && item.state === 0" class="state"> 审核中 </el-tag>
          <el-tag v-if="isSearchLoginedUser && item.state === 1" type="success" class="state">
            已通过
          </el-tag>
          <el-tag v-if="isSearchLoginedUser && item.state === -1" type="danger" class="state">
            未通过：{{ item.failedReason }}
          </el-tag>
        </el-card>
      </div>
    </div>
    <el-empty v-if="isEmpty" description="没有符合条件的数据" />
    <el-pagination
      v-if="!isEmpty"
      background
      class="m-t-10 m-b-10"
      style="justify-content: flex-end"
      :page-sizes="[4, 6, 12, 20]"
      layout="sizes, prev, pager, next"
      :total="needInfo?.total"
      :page-size="requestData.size"
      v-model:current-page="requestData.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import searchCondition from '@/components/search-condition/index.vue';
import back from '@/components/back/index.vue';
import { Edit } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { needList, delDemand } from '@/api/technology-transform';
import { ElMessage, ElMessageBox } from 'element-plus';

// 分页
function handleSizeChange(val: number) {
  requestData.value.size = val;
  loadData();
}
function handleCurrentChange(val: number) {
  requestData.value.current = val;
  loadData();
}

// 搜索的回调
function doSearch(query: any) {
  requestData.value = { ...requestData.value, ...query };
  loadData();
}

// 我发布的需求-编辑-删除需求操作
function toEdit(id: number) {
  router.push({
    name: 'publishNeed',
    query: {
      nId: id,
    },
  });
}
function doDelete(id: number) {
  ElMessageBox.confirm('确定删除该需求吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      delDemand(id).then((res: any) => {
        if (res?.code === 200) {
          ElMessage.success('删除成功');
          loadData();
        }
      });
    })
    .catch(() => {});
}
const props = defineProps<{
  userId?: number;
  isSearchLoginedUser?: boolean;
}>();

const router = useRouter();
function toPublish() {
  router.push({
    name: 'publishNeed',
  });
}
function toDetail(nId: string | number) {
  router.push({
    name: 'needDetail',
    query: {
      nId,
    },
  });
}

// 获取需求列表
const needInfo = ref({
  total: 0,
  list: [] as any[],
});
const requestData = ref<{
  size: number;
  current: number;
  searchWord?: string;
  author?: number;
  location?: string;
  industrySector?: string;
  state?: number | null;
}>({
  size: 4,
  current: 1,
  author: props.userId,
  state: props.userId ? null : 1,
});
onMounted(() => {
  loadData();
});
const isEmpty = ref(false);
function loadData() {
  needList(requestData.value).then((res: any) => {
    if (res.code === 200) {
      needInfo.value.total = res.data.total;
      needInfo.value.list = res.data.records;
      if (res.data.total === 0) {
        isEmpty.value = true;
      } else {
        isEmpty.value = false;
      }
    }
  });
}
</script>

<style lang="scss" scoped>
.needs {
  padding: 20px;
  .need-list {
    display: flex;
    flex-wrap: wrap;
    .card-box {
      width: 50%;
      padding: 10px 15px;
      .card-inner {
        &-head {
          display: flex;
          justify-content: space-between;
        }
      }
      .operation-btns {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .state {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>
